<template>
	<view>
		<u-navbar :borderBottom=false title-color="#FFFFFF" back-icon-color="#FFFFFF" title="快速回收寄卖"
			:background="background" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="flex-col group_5">
			<!-- 物品信息开始 -->
			<view class="flex-col info">
				<view class="flex-row group_6">
					<image :src="evaluation_obj.format_image" class="image_5" />
					<text class="text_3">{{evaluation_obj.name}}</text>
				</view>
				<text class="text_4">当前预估寄卖价格</text>
				<view class="justify-between group_7">
					<view class="flex-row" v-if="evaluation_obj.price>0">
						<text class="text_5">￥</text>
						<view class="group_9">
							<text class="text_6">{{evaluation_obj.price}}</text>
						</view>
					</view>
					<view class="flex-row" v-else>
						<view class="group_9">
							<text class="text_7">联系客服议价</text>
						</view>
					</view>
					<view @click="back()" class="flex-col items-center text-wrapper">
						<text>重新选择</text>
					</view>
				</view>
			</view>
			<view class="flex-row section_1">
				<image src="/static/point.png" class="image_6 image_7" />
				<text class="text_9">拒绝回收寄卖不合法来源的产品，如经发现当即没收，移交公安机关处理</text>
			</view>
			<!-- 快递回收开始 -->
			<view class="flex-col">
				<view class="flex-col section_2">
					<view class="items-center">
						<view class="section_3"> </view>
						<text class="text_12">添加联系信息</text>
					</view>
				</view>
				<view class="item-view">
					<text>联系人</text>
					<input placeholder="请输入联系人姓名" v-model="userInfo.name" type="text"></input>
				</view>
				<view class="divider"></view>
				<view class="item-view">
					<text>联系方式</text>
					<input placeholder="请输入联系电话" v-model="userInfo.phone" type="number"></input>
				</view>
				<view class="divider"></view>
			</view>
		</view>
		<!-- 立即下单开始 -->
		<view class="flex-col order">
			<view class="flex-row">
				<u-checkbox active-color="#00C785" class="section_5" size="25rpx" shape="circle" v-model="is_agree"
					@change="checkboxChange">
				</u-checkbox>
				<view class="group_25">
					<text class="text_29">我已阅读并同意</text>
					<!-- <text @click="toParse(10)" class="text_30">《服务条款》</text> -->
					<text @click="toContract()" class="text_30">《寄卖合同协议》</text>
				</view>
			</view>
			<u-button @click="toOrder()" :custom-style="customStyle" shape="circle">立即寄卖</u-button>
		</view>
		<!-- 立即下单结束 -->
	</view>
</template>

<script>
	import{getSystem,createOrder} from '@/api/index.js'
	import {
		tiao,
		toast
	} from '@/utils/common.js'
	import {
		isMobile
	} from '../../store/common.js'
	export default {
		data() {
			return {
				isShow: 0,
				openid: '',
				covers: [{
					latitude: 0,
					longitude: 0,
					iconPath: '/static/red-location.png'
				}],
				nearest_store: {},
				customStyle: {
					width: '100%',
					marginTop: '20rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: "#ffffff",
					backgroundColor: '#00C785'
				},
				type: 'online',
				goods_number: '',
				is_agree: 0,
				evaluation_obj: '',
				background: {
					backgroundColor: '#00C785',
				},
				userInfo:{
					name:"",
					phone:""
				}
			}
		},
		onLoad(res) {
			console.log(res);
			// vk = that.vk;
			this.evaluation_obj = JSON.parse(decodeURIComponent(res.data))
			// this.copyData()
			// vk.userCenter.getCurrentUserInfo({
			//   success: function(data) {
			// 	  console.log(data)
			//     // 成功后的逻辑
			// 	let userInfo = data.userInfo;
			// 	that.openid = userInfo.wx_openid['mp-weixin']
			//   }
			// });
		},
		methods: {
			toStores() {
				// vk.navigateTo('/pages/stores/stores')
			},
			navigation() {
				uni.openLocation({
					latitude: parseFloat(that.nearest_store.lat), //维度
					longitude: parseFloat(that.nearest_store.lng), //经度
					name: that.nearest_store.name, //目的地定位名称
					scale: 15, //缩放比例
					address: that.nearest_store.address, //导航详细地址
					success() {},
					fail(res) {}
				})
			},
			phoneCall(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile
				});
			},
			toParse(name) {
				tiao('/pages/parse/parse',{name})
			},
			toContract() {
				// if(!isMobile(this.userInfo.phone)){
				// 	toast("请输入正确的电话号码")
				// 	return
				// }
				// if(!this.userInfo.name){
				// 	toast("请输入用户姓名")
				// 	return
				// }
				// let obj ={
				// 	name:this.userInfo.name,
				// 	machine_name:this.evaluation_obj.name,
				// 	goods_sn:this.evaluation_obj.brand,
				// 	is_best:""
				// }
				// uni.navigateTo({
				// 	url:'/pages/parse/contract?obj='+JSON.stringify(obj)
				// })
				tiao('/pages/parse/contract')
				
				// vk.navigateTo('/pages/parse/contract?form=' + JSON.stringify(this.form));
			},
			changeGetType(type) {
			},
			toOrder() {
				if(!isMobile(this.userInfo.phone)){
					toast("请输入正确的电话号码")
					return
				}
				if(!this.userInfo.name){
					toast("请输入用户姓名")
					return
				}
				if(!this.is_agree!=0){
					toast("请勾选服务条款")
					return
				}
				let obj = this.evaluation_obj
				createOrder({
					goods_id:obj.id,
					user_name:this.userInfo.name,
					user_phone:this.userInfo.phone
					
				}).then(res=>{
					console.log(res);
					if(res.code==200){
						toast("创建成功")
						uni.showModal({
							title:'是否填写订单信息',
							cancelText:"取消",
							confirmText:"确认",
							success(res) {
								if(res.confirm){
									uni.redirectTo({
										url:'/pages/orders/orders?index=0'
									})
								}else{
									uni.navigateBack()
								}
							}
						})
					}
					// if(res.code==401){
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: "你还没有登录,是否去登录",
					// 		cancelText: '取消',
					// 		confirmText: '确定',
					// 		success: function(res) {
					// 			if (res.confirm == true) {
					// 				uni.navigateTo({
					// 					url: '/pages/login/login'
					// 				})
					// 			}
					// 		},
					// 	})
					// }
					
				})

				
			},
			back() {
				uni.navigateBack()
			},
			checkboxChange(e) {
				this.is_agree = e.value;
			},
			//客服信息
			getContact(call) {
				console.log(call)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 线下回收开始
	.offline {
		margin-left: 30rpx;
		padding: 35rpx 0 507rpx;
		position: relative;

		.image-wrapper {
			margin-left: 14rpx;
			padding-top: 2rpx;
			background-color: rgb(236, 236, 236);
			border-radius: 0px 16rpx 0px 0px;
			width: 346rpx;

			.image_7 {
				margin-right: 6rpx;
				filter: blur(7rpx);
				width: 81rpx;
				height: 72rpx;
			}
		}

		.image_8 {
			width: 411rpx;
			height: 134rpx;
			position: absolute;
			right: 0;
			top: 23rpx;
		}


	}

	// 线下回收结束
	// 物品信息开始
	.group_5 {
		padding-left: 30rpx;
		padding-top: 30rpx;

		.info {
			margin-right: 30rpx;
			padding: 20rpx 30rpx 18rpx;
			background-position: 0px 0px;
			background-size: 690rpx 258rpx;
			background-repeat: no-repeat;
			box-shadow: 2px 2px 10px #cccccc;
			border-radius: 10rpx;

			.group_6 {
				color: rgb(34, 34, 34);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;

				.image_5 {
					border-radius: 3rpx;
					width: 50rpx;
					height: 50rpx;
				}

				.text_3 {
					margin: 5rpx 0 5rpx 20rpx;
				}
			}

			.text_4 {
				margin-top: 20rpx;
				color: rgb(153, 153, 153);
				font-size: 22rpx;
				line-height: 30rpx;
				white-space: nowrap;
			}

			.group_7 {
				margin-top: 8rpx;

				.text-wrapper {
					padding: 9rpx 0;
					align-self: center;
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 500;
					line-height: 33rpx;
					white-space: nowrap;
					background-color: rgb(0, 199, 133);
					box-shadow: 0px 2rpx 20rpx 0px rgba(0, 151, 101, 0.2);
					border-radius: 25rpx;
					width: 160rpx;
					height: 50rpx;
				}

				.text_5 {
					margin-top: 38rpx;
					color: rgb(0, 199, 133);
					font-size: 44rpx;
					font-weight: 500;
					line-height: 62rpx;
					white-space: nowrap;
				}

				.group_9 {
					white-space: nowrap;
					height: 112rpx;
					line-height: 119rpx;

					.text_6 {
						color: rgb(0, 199, 133);
						font-size: 80rpx;
						font-weight: 600;
						line-height: 112rpx;
					}

					.text_7 {
						color: rgb(0, 199, 133);
						font-size: 40rpx;
						font-weight: 600;
						line-height: 56rpx;
					}
				}
			}
		}

		.section_1 {
			margin-right: 30rpx;
			margin-top: 10rpx;
			padding: 14rpx 20rpx 13rpx;
			color: rgb(194, 155, 123);
			font-size: 20rpx;
			background-color: rgb(255, 249, 235);
			border-radius: 28rpx;

			.image_7 {
				margin: 4rpx 0;
			}

			.text_9 {
				margin-left: 10rpx;
			}
		}

		.image_6 {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.section_2 {
		margin-top: 40rpx;

		.section_3 {
			width: 3px;
			height: 30rpx;
			background: rgb(0, 199, 133);
			border-radius: 10rpx;
			margin-right: 10rpx;
		}
	}

	.item-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		padding-left: 20rpx;
		padding-right: 40rpx;
		font-size: 26rpx;
		color: #333;
		
		text {
			width: 150rpx;
			font-size: 26rpx;
			color: #333;
		}
		
		input {
			flex: 1;
			font-size: 26rpx;
			color: #333;
		}
	}
	
	.divider {
		margin: 0 30rpx;
		background-color: rgb(238, 238, 238);
		height: 2rpx;
	}

	.order {
		width: 100%;
		padding: 20rpx 30rpx 15rpx;
		position: fixed;
		background-color: rgb(255, 255, 255);
		box-shadow: 0px -4rpx 30rpx 0px rgba(0, 0, 0, 0.05);
		bottom: 0px;

		.button {
			margin-top: 20rpx;
			width: 92vw;
			height: 10.5vw;
		}

		.section_5 {
			margin: -5rpx -30rpx 0 0;
		}

		.group_25 {
			margin-left: 10rpx;
			line-height: 30rpx;
			white-space: nowrap;
			height: 30rpx;

			.text_29 {
				color: rgb(153, 153, 153);
				font-size: 22rpx;
				line-height: 30rpx;
			}

			.text_30 {
				color: rgb(0, 199, 133);
				font-size: 22rpx;
				line-height: 30rpx;
			}
		}
	}

	// 立即下单结束
</style>